<template>
  <view class="active-list">
    <!-- <image src="@/static/images/demo/2.jpg" style="width: 100%;" mode="widthFix"></image> -->
    <view class="active-top flex">
      <view class="select flex flex-c flex-j" @click="show1 = true">
        <p>熱門</p>
        <u-icon name="arrow-down-fill" color="#99a1b5"></u-icon>
      </view>
      <view style="width: 30px"></view>
      <view class="right flex-1 flex flex-c flex-j" style="position: relative">
        <u--input
          class="u-input"
          placeholder="搜索活動"
          fontSize="16"
        ></u--input>
        <u-icon name="search" size="24" color="#fff" class="search"></u-icon>
        <view class="orange"></view>
      </view>
    </view>
    <view class="active-content">
      <view class="">
        <view class="item card-list" @click="openUrl('/pages/active/detail')" v-for="(item, index) in list" :key="index">
          <view class="card flex">
            <!-- <img src="@/static/images/home/avatar.png" class="pic" /> -->
             <image src="@/static/images/home/avatar.png" class="pic" mode="aspectFill"></image>
            <view class="info flex-1">
              <view class="title wrap-2"
                >活動名稱活動名稱活動名稱活動名稱活動名稱活動名稱活動名稱</view
              >
              <view class="intro wrap"
                >活動詳情活動詳情活動詳情活動詳情活動詳情</view
              >
              <view class="flex flex-c flex-j">
                <view class="price"
                  >2024-01-01</view>
                
                <view @click.stop="application()"
                  ><u-button
                    type="warning"
                    shape="circle"
                    size="small"
                    text="立即報名"
                    color="#2E2E33"
                    style="width: 80px"
                  ></u-button
                ></view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </view>
    <u-picker
      :show="show1"
      keyName="label"
      :columns="columns"
      @confirm="confirm"
      @cancel="show1 = false"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: "loadmore",
      list: 15,
      page: 0,
      columns: [
        [
          {
            value: "1",
            label: "活动主题A",
          },
          {
            value: "2",
            label: "活动主题B",
          },
        ],
      ],
      show1: false,
    };
  },
  onLoad() {},
  onReachBottom() {
    if (this.page >= 3) return;
    this.status = "loading";
    this.page = ++this.page;
    setTimeout(() => {
      this.list += 10;
      if (this.page >= 3) this.status = "nomore";
      else this.status = "loading";
    }, 2000);
  },
  methods: {
    openUrl(url){
				uni.navigateTo({
					url:url
				});
		},
    application(){
      uni.showModal({
        title: '提示',
        content: '是否确定报名？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    confirm(e) {
      this.show1 = false;
      console.log(e);
    },
    change(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss">
.active-content {
  margin-top: 16px;
  padding-top: 24px;
  border-top: solid 1px #f0f0f0;
  .card-list {
    .card {
      margin-bottom: 20px;
      .pic {
        margin-right: 12px;
        width: 120px;
        height: 120px;
      }
      .title {
        line-height: 20px;
        color: #323233;
        font-weight: bold;
      }
      .intro {
        margin: 4px 0 24px;
        color: #9a9a9a;
        font-size: 14px;
      }
      .price {
        font-size: 14px;
        color: #9a9a9a;
      }
    }
  }
}
.active-list {
  padding: 24px;

  .u-input {
    // height: 95%;
    height: 32px;
    padding: 0 18px;
    background: #f0f3f8;
    color: #333;
    text-indent: 5px;
    border-radius: 8px;
    font-size: 16px;
    border: 0;
  }
  .orange {
    z-index: 5;
    position: absolute;
    top: 0px;
    right: 0;
    background: orange;
    border-radius: 0 8px 8px 0;
    width: 45px;
    height: 45px;
  }
  .right {
    .u-icon {
      z-index: 15;
      padding-right: 10px;
    }
  }
  .select {
    position: relative;
    width: 70px;
    height: 45px;
    line-height: 45px;
    color: orange;
    font-size: 16px;
    background: #f0f3f8;
    border-radius: 10px;
    padding: 0 12px;
  }
}
</style>
